<template>
  <div>
    <div>
      <el-button type="success" @click="fn">按钮</el-button>
      <el-button type="success" @click="fn1">全屏</el-button>
    </div>
    <div>
      <canvas
        ref="glcanvas"
        style="border: 1px solid red"
        class="w-[800px] h-[600px]"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { initializeWebGL } from "../../views/welcome/utils/videoFn";
import viodeWebSocket from "@/api/webSocket";

const glcanvas = ref<HTMLCanvasElement | null>(null);
const Width = ref<number>(0);
const Height = ref<number>(0);
let res = null;
onMounted(() => {
  initializeWebGL(glcanvas.value);
  res = viodeWebSocket(
    "ws://127.0.0.1:10007/rtsp",
    "rtsp%3A%2F%2F192.168.2.88%2Flive%2FxFC9FFD43CBA8",
    glcanvas.value,
    Width.value,
    Height.value
  );
});
const fn = () => {
  res.close();
};
const fn1 = () => {
  if (!document.fullscreenElement) {
    // 如果当前没有全屏元素，则将 div 进入全屏模式
    if (glcanvas.value.requestFullscreen) {
      glcanvas.value.requestFullscreen();
    }
  }
};
</script>
